<template>
  <!-- 对话框(添加 / 修改) -->
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="500px"
    append-to-body
    :before-close="cancel"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="学院" prop="collegeId">
        <college-selector v-model="form.collegeId"></college-selector>
      </el-form-item>
      <el-form-item label="系部" prop="departmentId">
        <departments-selector
          v-model="form.departmentId"
          :college-id="form.collegeId"
        ></departments-selector>
      </el-form-item>
      <el-form-item label="关联房间" prop="roomId">
        <el-select
          v-model="form.roomId"
          placeholder="请选择关联房间"
          filterable
          clearable
          @change="roomChange"
        >
          <el-option
            v-for="dict in roomList"
            :key="dict.id"
            :label="dict.roomName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="关联铺位" prop="bedId">
        <el-select
          v-model="form.bedId"
          placeholder="请选择铺位"
          filterable
          clearable
        >
          <el-option
            v-for="dict in bedList"
            :key="dict.id"
            :label="dict.bedName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="入住人" prop="resideName">
        <div
          style="
            display: flex;
            justify-content: flex-start;
            align-items: center;
          "
        >
          <el-input
            v-model="form.resideName"
            style="width: 54%; margin-right: 10px"
            placeholder="请关联入住人"
            id="resideName"
          />
          <el-button type="primary" size="small" @click="studentFlag = true"
            >关联
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="入住状态" prop="resideStatus">
        <el-select v-model="form.resideStatus" placeholder="请选择入住状态">
          <el-option
            v-for="dict in this.getDictDatas(
              DICT_TYPE.ACCOMMODATION_ROOM_STATUS
            )"
            :key="dict.value"
            :label="dict.label"
            :value="parseInt(dict.value)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="入住角色" prop="role">
        <el-select v-model="form.role" placeholder="请选择入住角色">
          <el-option
            v-for="dict in this.getDictDatas(DICT_TYPE.ACCOMMODATION_ROOM_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="parseInt(dict.value)"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="入住人昵称" prop="resideName">
                        <el-input v-model="form.resideName" placeholder="请输入入住人昵称" />
                      </el-form-item> -->
      <!-- <el-form-item label="入住备注" prop="resideRemark">
                        <el-input v-model="form.resideRemark" placeholder="请输入入住备注" />
                      </el-form-item>
                      <el-form-item label="床铺id" prop="bedId">
                        <el-input v-model="form.bedId" placeholder="请输入床铺id" />
                      </el-form-item>
                      <el-form-item label="学院id" prop="collegeId">
                        <el-input v-model="form.collegeId" placeholder="请输入学院id" />
                      </el-form-item>
                      <el-form-item label="机构编号" prop="orgId">
                        <el-input v-model="form.orgId" placeholder="请输入机构编号" />
                      </el-form-item> -->
      <el-form-item label="备注" prop="remark">
        <el-input
          type="textarea"
          :rows="2"
          v-model="form.remark"
          placeholder="请输入备注"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
    <el-dialog title="学生列表" :visible.sync="studentFlag" append-to-body>
      <student-list @handleStudentData="getStudentData"></student-list>
    </el-dialog>
  </el-dialog>
</template>

<script>
import {
  createAccommodationReside,
  updateAccommodationReside,
  byDepartmentList,
  byRoomList,
} from "@/api/collegebase/accommodationReside";
import common from "@/api/collegebase/common";
import studentList from "@/views/collegebase/studentChange/studentList";
import CollegeSelector from "@/components/CollegeSelector";
import DepartmentsSelector from "@/components/DepartmentsSelector";

export default {
  name: "AccommodationResideEdit",
  components: {
    DepartmentsSelector,
    CollegeSelector,
    studentList,
  },
  data() {
    return {
      studentFlag: false,
      bedList: [],
      departmentsList: [],
      roomList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        resideId: [
          { required: true, message: "入住人id不能为空", trigger: "blur" },
        ],
        roomId: [
          { required: true, message: "关联房间不能为空", trigger: "blur" },
        ],
        resideName: [
          { required: true, message: "入住人不能为空", trigger: "blur" },
        ],
        resideStatus: [
          { required: true, message: "入住状态不能为空", trigger: "blur" },
        ],
        role: [
          {
            required: true,
            message: "入住角色（角色+id 联合确立关系）不能为空",
            trigger: "change",
          },
        ],
        bedId: [{ required: true, message: "床铺id不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
  },
  props: {
    // 是否显示弹出层
    show: {
      type: Boolean,
      default: false,
    },
    // 显示弹出层标题
    title: {
      type: String,
      default: "",
    },
  },
  watch: {
    'form.departmentId':
    {
      handler(newV, oldV) {
        console.info(newV, oldV)
        this.form.departmentId = ''
        if (undefined != newV && newV != '') {
          this.form.departmentId = newV;
          this.departmentChange(newV)
        }
      },
      immediate: true
    }
  },
  methods: {
    getStudentData(data) {
      this.form.resideId = data.id;
      this.form.resideName = data.studentName;
      this.studentFlag = false;
      document.querySelector("#resideName").focus();
      document.querySelector("#resideName").blur();
    }
    ,
    async roomChange(roomId) {
      const res = await byRoomList(roomId);
      this.bedList = res.data;
    }
    ,


    async departmentChange(departmentId) {
      const res = await byDepartmentList(departmentId);
      this.roomList = res.data;
    },


    /** 初始化编辑的数据**/
    initData(rowData) {
      this.reset();
      if (rowData && rowData.id) {
        this.form = rowData;
        this.roomChange(rowData.roomId);
        this.form.datetimerange = [this.form.startTime, this.form.endTime];
      }
    }
    ,
    /** 取消按钮 */
    cancel() {
      this.$emit("update:show", false);
      this.reset();
    }
    ,
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        resideId: undefined,
        role: undefined,
        resideName: undefined,
        resideRemark: undefined,
        bedId: undefined,
        collegeId: undefined,
        orgId: undefined,
        remark: undefined,
      };
      this.resetForm("form");
    }
    ,
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        // 修改的提交
        if (this.form.id != null) {
          updateAccommodationReside(this.form).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.cancel();
            this.$emit("success");
          });
          return;
        }
        // 添加的提交
        createAccommodationReside(this.form).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.cancel();
          this.$emit("success");
        });
      });
    }
    ,
  }
  ,
}
  ;
</script>
